<template>
  <el-dialog v-model="dialogVisible" width="400px" align-center>
    <template #header>
      <div class="flex items-center gap-2">
        <el-icon><Warning class="text-amber-400 text-2xl" /></el-icon>
        <span>{{
          action === "disable" ? "Disable the account" : "Enable the account"
        }}</span>
      </div>
    </template>
    <div>
      <p>Are you sure you want to {{ action }} the account {{ email }} ?</p>
    </div>
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// 启用/禁用账号确认对话框
// 职责：展示确认文案，确认后向父组件发出 confirm 事件
import { ref, watch } from "vue";
import { Warning } from "@element-plus/icons-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  email: {
    type: String,
    default: ""
  },
  action: {
    type: String,
    default: "disable" // 'disable' or 'enable'
  }
});

const emit = defineEmits(["update:visible", "confirm"]);

const dialogVisible = ref(props.visible);

// 监听可见性：父传入 visible 改变时同步对话框显隐
watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
  }
);

// 监听对话框可见性：同步回父组件
watch(
  () => dialogVisible.value,
  val => {
    emit("update:visible", val);
  }
);

// 确认：关闭弹窗并通知父组件
const handleConfirm = () => {
  dialogVisible.value = false;
  emit("confirm");
};
</script>
